<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 助手</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <button class="new-chat-btn" id="newChatBtn" title="新对话">
                    <i class="fas fa-plus"></i>
                </button>
                <button class="toggle-sidebar-btn" id="toggleSidebarBtn" title="隐藏侧边栏">
                    <i class="fas fa-chevron-left"></i>
                </button>
            </div>
            <div id="chatList" class="chat-list">
                <!-- 对话列表由JS填充 -->
            </div>
        </aside>

        <!-- 侧边栏恢复按钮 -->
        <div class="sidebar-toggle-container">
            <button class="restore-sidebar-btn" id="restoreSidebarBtn" title="显示侧边栏">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>

        <!-- 主内容区 -->
        <main class="main-content" style="position: relative;">
            <!-- 模型选择下拉栏 -->
            <div class="model-selector-container">
                <select id="modelSelect" title="选择模型"></select>
            </div>

            <!-- 欢迎屏幕 -->
            <div id="welcomeScreen" class="welcome-screen">
                <h1>欢迎使用 GerTalk</h1>
                <p>您可以开始新的对话，或从左侧选择已有的对话继续交流。</p>
            </div>

            <!-- 聊天容器 -->
            <div id="chatContainer" class="chat-container" style="display: none;"></div>

            <!-- 输入区域 -->
            <div class="input-container">
                <div class="input-wrapper">
                    <textarea 
                        id="messageInput"
                        class="message-input"
                        placeholder="输入消息，Shift + Enter 换行，Enter 发送"
                        rows="1"
                    ></textarea>
                    <button id="sendButton" class="send-button">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </main>
    </div>

    <!-- 加载指示器 -->
    <div id="loadingSpinner" class="loading-spinner" style="display: none;">
        <div class="spinner"></div>
    </div>

    <!-- 提示框 -->
    <div id="toast" class="toast" style="display: none;"></div>

    <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
</body>
</html>
